<template>
  <div class="todo-list text-center mg20">
    <h3 class="mg10">Todo List</h3>
    <div class="flex flex-center">
      <input ref="todoinput" v-focus="200" v-model="addTodoName" />
      <Button @click="addTodoAction" size="small" type="primary" :loading="addLoading">新增清单</Button>
      {{computedTodoName}}
    </div>
    <div>
      <h3 class="mg10">任务清单</h3>
      <CellGroup>
        <Cell :key="item.id" v-for="item in undoneTodoList">
          <template #title>
            <span>---{{ item.name }}---</span>
          </template>
          <template #right-icon>
            <Button @click="doneTodo(item)" size="small" type="success">已完成</Button>
            <Button @click="delTodoAction(item)" size="small" type="danger">删除</Button>
          </template>
        </Cell>
      </CellGroup>
    </div>
    <div class="done-todo-area">
      <h3 class="mg10">已完成的任务清单</h3>
      <CellGroup>
        <Cell :key="item.id" v-for="item in completedTodoList">
          <template #title>
            <span>---{{ item.name }}---</span>
          </template>
          <template #right-icon>
            <Button @click="delDoneAction(item)" size="small" type="danger">删除</Button>
          </template>
        </Cell>
      </CellGroup>
    </div>
    <div class="container">

    </div>
    <container-test>
      <div class=" container-inner container">12w</div>
    </container-test>
    <div class="mg10">
      <Button @click="goAddress" block type="primary">地址列表</Button>
    </div>
    <div class="mg10 mg-t20">
      <Button @click="goChat" block type="primary">聊天室</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { Button, Cell, CellGroup } from "vant";
import router from "@/router";
import {useTodoList, useDoneList, Todo} from "@/views/todolist/todoList";
import ContainerTest from "@/views/todolist/container-test.vue";

const addTodoName = ref(""); // input 绑定值
const arrTest=reactive([])
// console.log('addTodoName:',addTodoName.value)

const {undoneTodoList,computedTodoName,addTodoAction,delTodoAction,addLoading}=useTodoList(addTodoName,arrTest)
const {completedTodoList, doneTodo, delDoneAction}=useDoneList(undoneTodoList)

function goAddress() {
  router.push("/address/list");
}

function goChat() {
  router.push("/chat/list");
}

const redColor='#ee0a24'

</script>
<style scoped>
  .container{
    width:100px;
    height:100px;
    background-color: #07c160;
  }
  .container-inner{
    width: 50px;
    height: 50px;
    background-color: v-bind('redColor');
  }
</style>
